<template>
	<div class="resource_detail_wrapper">
		<div class="resource_detail_body">
			<component :is="previewComp" :data="fileData" :file-src="fileShowPath"></component>
		</div>
		<div class="resource_detail_info" :class="{ fewer: !isUnfold }" v-clickoutside="handleHideAside">
			<div class="button">
				<p :class="{ active: isUnfold && activeName === 'fileInfo' }" @click="handleShowChange('fileInfo')">信息</p>
				<p :class="{ active: isUnfold && activeName === 'fileClassify' }" @click="handleShowChange('fileClassify')">分类标签</p>
				<p :class="{ active: isUnfold && activeName === 'fileLabel' }" @click="handleShowChange('fileLabel')">标签</p>
				<p :class="{ active: isUnfold && activeName === 'fileCatalog' }" @click="handleShowChange('fileCatalog')">编目</p>
				<p :class="{ active: isUnfold && activeName === 'fileDynamic' }" @click="handleShowChange('fileDynamic')">动态</p>
				<!-- <i :class="isUnfold ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"></i> -->
			</div>
			<div class="title">{{ fileData.oldName }}</div>
			<div class="head">
				<div class="info">
					<template v-if="fileData.isLocal === '1'">
						<i class="el-icon-document"></i>
						本地资源
					</template>
					<template v-else>
						<i class="el-icon-link"></i>
						外部链接资源
					</template>
				</div>
				<el-button size="medium" type="text" icon="el-icon-download">下载</el-button>
				<el-button size="medium" type="text" icon="el-icon-star-off">收藏</el-button>
				<el-button size="medium" type="text" icon="el-icon-share">分享</el-button>
			</div>
			<el-tabs v-model="activeName">
				<el-tab-pane label="信息" name="fileInfo"></el-tab-pane>
				<el-tab-pane label="分类标签" name="fileClassify"></el-tab-pane>
				<el-tab-pane label="标签" name="fileLabel"></el-tab-pane>
				<el-tab-pane label="编目" name="fileCatalog"></el-tab-pane>
				<el-tab-pane label="动态" name="fileDynamic"></el-tab-pane>
			</el-tabs>
			<component class="body" :is="activeName" :data="fileData"></component>
		</div>
	</div>
</template>

<script>
import fileLabel from './label';
import fileInfo from './fileInfo';
import fileCatalog from './catalog';
import fileDynamic from './dynamic';
import fileClassify from './classify';
import otherPlayer from './other';
import videoPlayer from '@/components/player/video';
import voicePlayer from '@/components/player/voice';
import imagePlayer from '@/components/player/image';
import documentPlayer from '@/components/player/document';
import clickoutside from 'element-ui/src/utils/clickoutside';
import { queryFileDetail, getResourcePath } from '@/api/data/tbNetDisk';
export default {
	components: { fileInfo, fileClassify, fileLabel, fileCatalog, fileDynamic, otherPlayer, videoPlayer, voicePlayer, imagePlayer, documentPlayer },
	data() {
		return {
			loading: false,
			activeName: 'fileInfo',
			fileData: {},
			fileShowPath: '',
			isUnfold: true
		};
	},
	directives: { clickoutside },
	computed: {
		fileId() {
			return this.$route.params.id;
		},
		previewComp() {
			let text = '';
			switch (this.fileData.showType) {
				case '1':
					text = 'imagePlayer';
					break;
				case '2':
					text = 'voicePlayer';
					break;
				case '3':
					text = 'videoPlayer';
					break;
				case '4':
					text = 'documentPlayer';
					break;
				case '5':
					text = 'otherPlayer';
					break;
			}
			return text;
		}
	},
	watch: {
		fileId: {
			async handler(id) {
				this.loading = true;
				this.fileData = await this.getFileDetailData(id);
				if (this.fileData.isLocal === '1') {
					this.fileShowPath = await this.getFilePath(id);
				} else if (this.fileData.isLocal === '2') {
					this.fileShowPath = this.fileData.attrAddr;
				}
				this.loading = false;
			},
			immediate: true
		}
	},
	methods: {
		//获取文件详情
		async getFileDetailData(id) {
			let result = await queryFileDetail(id).then((res) => res.data);
			if (result.code === '0') {
				return Promise.resolve(!result.data ? [] : result.data[0]);
			}
		},

		//获取文件路径
		async getFilePath(id) {
			let result = await getResourcePath(id).then((res) => res.data);
			if (result.code === '0') {
				return Promise.resolve(!result.data ? [] : result.data[0]);
			}
		},

		//展开/收起右边信息栏
		handleShowChange(data) {
			this.isUnfold = true;
			this.activeName = data;
		},

		handleHideAside() {
			this.isUnfold = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_detail_wrapper {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.resource_detail_body {
	flex: 1;
	overflow: hidden;
	background-color: #000;
	position: relative;
	z-index: 1;
}

.resource_detail_info::v-deep {
	display: flex;
	flex-direction: column;
	width: 30%;
	max-width: 480px;
	flex-shrink: 0;
	box-sizing: border-box;
	background-color: #fff;
	position: relative;
	z-index: 2;
	transition: width 0.15s linear;

	&.fewer {
		width: 0;
	}

	.button {
		position: absolute;
		top: 0;
		bottom: 0;
		right: calc(100% - 1px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		p {
			line-height: 1.2;
			padding: 6px;
			margin-top: 5px;
			border-radius: 4px 0 0 4px;
			background-color: #fff;
			border-right: solid 1px #ebeef5;
			cursor: pointer;
			&:first-child {
				margin-top: 0;
			}
			&.active {
				color: #fff;
				background-color: var(--primary-active);
			}
			&:hover {
				color: #fff;
				background-color: var(--primary-hover);
			}
		}
	}

	.title {
		padding: 10px 16px 5px;
		line-height: 20px;
		font-weight: bold;
		flex-shrink: 0;
	}

	.head {
		display: flex;
		align-items: center;
		padding: 0 16px;
		border-bottom: solid 1px #ebeef5;
		flex-shrink: 0;

		.info {
			flex: 1;
			overflow: hidden;
		}
	}

	.el-tabs {
		flex-shrink: 0;
	}

	.el-tabs__header {
		margin: 0;
	}

	.el-tabs__nav-wrap {
		padding: 0 16px;
	}

	.el-tabs__nav-next,
	.el-tabs__nav-prev {
		line-height: 40px;
	}

	.el-tabs__item {
		padding: 0 10px;
	}

	.body {
		flex: 1;
		overflow: auto;
	}
}
</style>
